//
//  ContentView.swift
//  homework1
//
//  Created by 刘海洋 on 2023/4/2.
//

import SwiftUI

struct ContentView: View {
    
    @State var search = ""
    
    var body: some View {
        NavigationView{
            VStack {
                //搜索栏
                TextField("Search...",text: $search)
                    .padding(7)
                    .padding(.horizontal,25)
                    .background(Color(.systemGray6))
                    .cornerRadius(8)
                    .overlay(
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(.gray)
                            .frame(minWidth: 0,maxWidth: .infinity,alignment: .leading)
                            .padding(.leading,8)
                        
                    )
                    .overlay(
                        Image(systemName: "mic.fill")
                            .foregroundColor(.gray)
                            .frame(minWidth: 0,maxWidth: .infinity,alignment: .trailing)
                            .padding(.trailing,8)
                    )
                    .padding(.horizontal,10)
                
                //图标
                
                VStack(spacing:10){
                    HStack(spacing:10){
                        NavigationLink(destination:NextView()){
                            VStack{
                                Image("头像1")
                                    .resizable()
                                    .scaledToFit()
                                    .foregroundColor(.white)
                                    .padding(EdgeInsets(top: 10, leading: 15, bottom: 10, trailing: 15))
                                    .background(Color.blue)
                                    .clipShape(Circle())
                                Text("First")
                                    .foregroundColor(Color.gray)
                            }
                        }
                        
                        NavigationLink(destination:NextView()){
                            VStack{
                                Image("头像2")
                                    .resizable()
                                    .scaledToFit()
                                    .foregroundColor(.white)
                                    .padding(EdgeInsets(top: 10, leading: 15, bottom: 10, trailing: 15))
                                    .background(Color.red)
                                    .clipShape(Circle())
                                Text("Second")
                                    .foregroundColor(Color.gray)
                            }
                        }
                        
                        NavigationLink(destination:NextView()){
                            VStack{
                                Image("头像3")
                                    .resizable()
                                    .scaledToFit()
                                    .foregroundColor(.white)
                                    .padding(EdgeInsets(top: 10, leading: 15, bottom: 10, trailing: 15))
                                    .background(Color.green)
                                    .clipShape(Circle())
                                Text("third")
                                    .foregroundColor(Color.gray)
                            }
                        }
                    }
                    
                    HStack(spacing:10){
                        NavigationLink(destination:NextView()){
                            VStack{
                                Image("头像4")
                                    .resizable()
                                    .scaledToFit()
                                    .foregroundColor(.white)
                                    .padding(EdgeInsets(top: 10, leading: 15, bottom: 10, trailing: 15))
                                    .background(Color.purple)
                                     .clipShape(Circle())
                                Text("fourth")
                                    .foregroundColor(Color.gray)
                            }
                        }
                        
                        NavigationLink(destination:NextView()){
                            VStack{
                                Image("头像5")
                                    .resizable()
                                    .scaledToFit()
                                    .foregroundColor(.white)
                                    .padding(EdgeInsets(top: 10, leading: 15, bottom: 10, trailing: 15))
                                    .background(Color.orange)
                                     .clipShape(Circle())
                                Text("fifth")
                                    .foregroundColor(Color.gray)
                            }
                        }
                        
                        NavigationLink(destination:NextView()){
                            VStack{
                                Image("头像6")
                                    .resizable()
                                    .scaledToFit()
                                    .foregroundColor(.white)
                                    .padding(EdgeInsets(top: 10, leading: 15, bottom: 10, trailing: 15))
                                    .background(Color.brown)
                                     .clipShape(Circle())
                                Text("sixth")
                                    .foregroundColor(Color.gray)
                            }
                        }
                    }
                }
                
                //列表
                List{
                    NavigationLink(destination:NextView()){
                        HStack{
                            //头像
                            Image("头像7")
                                .resizable()
                                .scaledToFit()
                                .foregroundColor(.white)
                                .padding(EdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5))
                                .background(Color.brown)
                                .clipShape(Circle())
                                .frame(width: 50, height: 50)
                            //名称与内容
                            VStack(alignment: .leading){
                                Text("Write SwiftUI book")
                                Text("this is a text")
                                    .foregroundColor(Color.gray)
                            }
                            //日期与图标
                            HStack(alignment: .center){
                                Text("1/1/21")
                            }
                            .foregroundColor(Color.gray)
                            .frame(width: 75, height: 50, alignment: .topTrailing)
                        }
                    }
                    NavigationLink(destination:NextView()){
                        HStack{
                            //头像
                            Image("头像7")
                                .resizable()
                                .scaledToFit()
                                .foregroundColor(.white)
                                .padding(EdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5))
                                .background(Color.brown)
                                .clipShape(Circle())
                                .frame(width: 50, height: 50)
                            //名称与内容
                            VStack(alignment: .leading){
                                Text("Write SwiftUI book")
                                Text("this is a text")
                                    .foregroundColor(Color.gray)
                            }
                            //日期与图标
                            HStack(alignment: .center){
                                Text("1/1/21")
                            }
                            .foregroundColor(Color.gray)
                            .frame(width: 75, height: 50, alignment: .topTrailing)
                        }
                    }
                    NavigationLink(destination:NextView()){
                        HStack{
                            //头像
                            Image("头像7")
                                .resizable()
                                .scaledToFit()
                                .foregroundColor(.white)
                                .padding(EdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5))
                                .background(Color.brown)
                                .clipShape(Circle())
                                .frame(width: 50, height: 50)
                            //名称与内容
                            VStack(alignment: .leading){
                                Text("Write SwiftUI book")
                                Text("this is a text")
                                    .foregroundColor(Color.gray)
                            }
                            //日期与图标
                            HStack(alignment: .center){
                                Text("1/1/21")
                            }
                            .foregroundColor(Color.gray)
                            .frame(width: 75, height: 50, alignment: .topTrailing)
                        }
                    }
                    NavigationLink(destination:NextView()){
                        HStack{
                            //头像
                            Image("头像7")
                                .resizable()
                                .scaledToFit()
                                .foregroundColor(.white)
                                .padding(EdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5))
                                .background(Color.brown)
                                .clipShape(Circle())
                                .frame(width: 50, height: 50)
                            //名称与内容
                            VStack(alignment: .leading){
                                Text("Write SwiftUI book")
                                Text("this is a text")
                                    .foregroundColor(Color.gray)
                            }
                            //日期与图标
                            HStack(alignment: .center){
                                Text("1/1/21")
                            }
                            .foregroundColor(Color.gray)
                            .frame(width: 75, height: 50, alignment: .topTrailing)
                        }
                    }
                    NavigationLink(destination:NextView()){
                        HStack{
                            //头像
                            Image("头像7")
                                .resizable()
                                .scaledToFit()
                                .foregroundColor(.white)
                                .padding(EdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5))
                                .background(Color.brown)
                                .clipShape(Circle())
                                .frame(width: 50, height: 50)
                            //名称与内容
                            VStack(alignment: .leading){
                                Text("Write SwiftUI book")
                                Text("this is a text")
                                    .foregroundColor(Color.gray)
                            }
                            //日期与图标
                            HStack(alignment: .center){
                                Text("1/1/21")
                            }
                            .foregroundColor(Color.gray)
                            .frame(width: 75, height: 50, alignment: .topTrailing)
                        }
                    }
                    NavigationLink(destination:NextView()){
                        HStack{
                            //头像
                            Image("头像7")
                                .resizable()
                                .scaledToFit()
                                .foregroundColor(.white)
                                .padding(EdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5))
                                .background(Color.brown)
                                .clipShape(Circle())
                                .frame(width: 50, height: 50)
                            //名称与内容
                            VStack(alignment: .leading){
                                Text("Write SwiftUI book")
                                Text("this is a text")
                                    .foregroundColor(Color.gray)
                            }
                            //日期与图标
                            HStack(alignment: .center){
                                Text("1/1/21")
                            }
                            .foregroundColor(Color.gray)
                            .frame(width: 75, height: 50, alignment: .topTrailing)
                        }
                    }
                    NavigationLink(destination:NextView()){
                        HStack{
                            //头像
                            Image("头像7")
                                .resizable()
                                .scaledToFit()
                                .foregroundColor(.white)
                                .padding(EdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5))
                                .background(Color.brown)
                                .clipShape(Circle())
                                .frame(width: 50, height: 50)
                            //名称与内容
                            VStack(alignment: .leading){
                                Text("Write SwiftUI book")
                                Text("this is a text")
                                    .foregroundColor(Color.gray)
                            }
                            //日期与图标
                            HStack(alignment: .center){
                                Text("1/1/21")
                            }
                            .foregroundColor(Color.gray)
                            .frame(width: 75, height: 50, alignment: .topTrailing)
                        }
                    }
                    NavigationLink(destination:NextView()){
                        HStack{
                            //头像
                            Image("头像7")
                                .resizable()
                                .scaledToFit()
                                .foregroundColor(.white)
                                .padding(EdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5))
                                .background(Color.brown)
                                .clipShape(Circle())
                                .frame(width: 50, height: 50)
                            //名称与内容
                            VStack(alignment: .leading){
                                Text("Write SwiftUI book")
                                Text("this is a text")
                                    .foregroundColor(Color.gray)
                            }
                            //日期与图标
                            HStack(alignment: .center){
                                Text("1/1/21")
                            }
                            .foregroundColor(Color.gray)
                            .frame(width: 75, height: 50, alignment: .topTrailing)
                        }
                    }
                }
                .listStyle(InsetListStyle())
                .scrollIndicators(.hidden)
                
                Spacer()
            }
            .padding()
            .edgesIgnoringSafeArea(.bottom)
            .navigationBarTitle("Massage",displayMode: .inline)
            //导航栏按钮
            .toolbar{
                ToolbarItem(placement: .navigationBarTrailing){
                    Button{
                        
                    }label: {
                        Image(systemName: "square.and.pencil")
                    }
                }
                ToolbarItem(placement: .navigationBarLeading){
                    Button{
                        
                    }label: {
                        Text("Edit")
                    }
                }
            }
            
        }
    }
}


struct NextView: View {
    @State var isShowMore = false
    @State var massage = ""
    @State var isLookPicture = false
    
    var body: some View {
        ZStack{
            if isLookPicture{
                Button(action: {
                    withAnimation(.easeIn(duration: 0.1)) {
                        self.isLookPicture.toggle()
                    }
                }, label: {
                    ZStack{
                        Rectangle()
                            .foregroundColor(.black)
                            .edgesIgnoringSafeArea(.bottom)
                        Image("示例图片1")
                            .resizable()
                            .scaledToFit()
                    }
                })
            }else{
                VStack (spacing: 0){
                    
                    //聊天栏
                    ScrollView{
                        VStack{
                            
                            HStack{
                                //头像
                                Image("头像7")
                                    .resizable()
                                    .scaledToFit()
                                    .foregroundColor(.white)
                                    .padding(EdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5))
                                    .background(Color.brown)
                                    .clipShape(Circle())
                                    .frame(width: 50, height: 50)
                                //名称与内容
                                VStack(alignment: .leading){
                                    Text("Mark")
                                        .foregroundColor(Color.gray)
                                    ZStack{
                                        Rectangle()
                                            .frame(width: 240,height: 50)
                                            .foregroundColor(Color(.systemGray6))
                                            .cornerRadius(20)
                                        Text("I toke so many beautiful \npictures for you")
                                    }
                                }
                                Spacer()
                            }
                            .padding()
                            
                            HStack{
                                //头像
                                Image("头像7")
                                    .resizable()
                                    .scaledToFit()
                                    .foregroundColor(.white)
                                    .padding(EdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5))
                                    .background(Color.brown)
                                    .clipShape(Circle())
                                    .frame(width: 50, height: 50)
                                //名称与内容
                                VStack(alignment: .leading){
                                    Text("Mark")
                                        .foregroundColor(Color.gray)
                                    ZStack{
                                        Rectangle()
                                            .frame(width: 240,height: 50)
                                            .foregroundColor(Color(.systemGray6))
                                            .cornerRadius(20)
                                        Text("I toke so many beautiful \npictures for you")
                                    }
                                }
                                Spacer()
                            }
                            .padding()
                            
                            HStack{
                                //头像
                                Image("头像7")
                                    .resizable()
                                    .scaledToFit()
                                    .foregroundColor(.white)
                                    .padding(EdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5))
                                    .background(Color.brown)
                                    .clipShape(Circle())
                                    .frame(width: 50, height: 50)
                                //名称与内容
                                Button(action: {
                                    withAnimation(.easeIn(duration: 0.1)) {
                                        self.isLookPicture.toggle()
                                    }
                                }, label: {
                                    Image("示例图片1")
                                        .resizable()
                                        .scaledToFit()
                                        .cornerRadius(20)
                                        .shadow(radius: 10)
                                })
                                Button(action: {
                                    
                                }, label: {
                                    Image(systemName: "square.and.arrow.down")
                                        .resizable()
                                        .scaledToFit()
                                        .foregroundColor(.blue)
                                        .padding(EdgeInsets(top: 7, leading: 7, bottom: 7, trailing: 7))
                                        .background(Color.white)
                                        .clipShape(Circle())
                                        .frame(width: 30, height: 30)
                                        .shadow(radius: 2)
                                })
                                Spacer()
                            }
                            .padding()
                            
                            HStack{
                                Spacer()
                                //名称与内容
                                VStack(alignment: .leading){
                                    ZStack{
                                        Rectangle()
                                            .frame(width: 80,height: 30)
                                            .foregroundColor(Color(.systemGray6))
                                            .cornerRadius(20)
                                        Text("great")
                                    }
                                }
                                //头像
                                Image("头像1")
                                    .resizable()
                                    .scaledToFit()
                                    .foregroundColor(.white)
                                    .padding(EdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5))
                                    .background(Color.brown)
                                    .clipShape(Circle())
                                    .frame(width: 50, height: 50)
                                
                            }
                            .padding()
                            
                            Spacer()
                        }
                    }
                    
                    Spacer()
                    
                    //聊天框和按钮
                    HStack{
                        Button(action: {
                            
                        }, label: {
                            Image(systemName: "camera.fill")
                                .resizable()
                                .scaledToFit()
                                .frame(width: 30)
                                .foregroundColor(Color.gray)
                        })
                        Button(action: {
                            withAnimation(.easeIn(duration: 0.1)) {
                                self.isShowMore.toggle()
                            }
                        }, label: {
                            Image("图标1")
                                .resizable()
                                .scaledToFit()
                                .frame(width: 40)
                        })
                        
                        ZStack(alignment: .trailing){
                            TextField("Massage...",text: $massage)
                                .padding(10)
                                .padding(.horizontal,15)
                                .background(Color(.systemGray6))
                                .cornerRadius(20)
                                .padding(.horizontal,10)
                            Button(action: {
                                
                            }, label: {
                                Image(systemName: "waveform.circle.fill")
                                    .resizable()
                                    .scaledToFit()
                                    .frame(width: 30)
                                    .foregroundColor(Color.gray)
                            })
                            .padding(.trailing,20)
                        }
                    }
                    .padding()
                        
                    //底部滚动按钮
                    if isShowMore{
                        ZStack(alignment: .top){
                            Rectangle()
                                .foregroundColor(Color(.systemGray4))
                                .frame(height: 40)
                            ScrollView(.horizontal,showsIndicators: false){
                                HStack{
                                    Image(systemName: "headphones.circle")
                                        .resizable()
                                        .scaledToFit()
                                        .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
                                        .background(Color.blue)
                                        .cornerRadius(100)
                                        .frame(width: 50,height: 30)
                                    
                                    Image("头像7")
                                        .resizable()
                                        .scaledToFit()
                                        .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
                                        .background(Color.black)
                                        .cornerRadius(100)
                                        .frame(width: 50,height: 30)
                                    
                                    Image("头像7")
                                        .resizable()
                                        .scaledToFit()
                                        .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
                                        .background(Color.white)
                                        .cornerRadius(100)
                                        .frame(width: 50,height: 30)
                                    
                                    Image("头像7")
                                        .resizable()
                                        .scaledToFit()
                                        .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
                                        .background(Color.pink)
                                        .cornerRadius(100)
                                        .frame(width: 50,height: 30)
                                    
                                    Image("头像7")
                                        .resizable()
                                        .scaledToFit()
                                        .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
                                        .background(Color.red)
                                        .cornerRadius(100)
                                        .frame(width: 50,height: 30)
                                    
                                    Image("头像7")
                                        .resizable()
                                        .scaledToFit()
                                        .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
                                        .background(Color.yellow)
                                        .cornerRadius(100)
                                        .frame(width: 50,height: 30)
                                    
                                    Image("头像7")
                                        .resizable()
                                        .scaledToFit()
                                        .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
                                        .background(Color.green)
                                        .cornerRadius(100)
                                        .frame(width: 50,height: 30)
                                    
                                    Divider().frame(height: 30)
                                    
                                    Image("头像7")
                                        .resizable()
                                        .scaledToFit()
                                        .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
                                        .background(Color.white)
                                        .cornerRadius(100)
                                        .frame(width: 50,height: 30)
                                    
                                }
                            }
                            .padding(5)
                        }
                        .transition(.asymmetric(insertion: .push(from: .bottom), removal: .move(edge: .bottom)))
                    }
                    Rectangle()
                        .foregroundColor(Color(.systemGray4))
                        .frame(height: 40)
                }
                .edgesIgnoringSafeArea(.bottom)
                .navigationTitle("Family")
                .toolbar{
                    ToolbarItem(placement: .navigationBarTrailing){
                        Button{
                            
                        }label: {
                            Image(systemName: "video")
                        }
                    }
                }
            }
        }
    }
}



struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
